<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>转手商城-后台首页</title>
		<link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../static/css/admin.css" />

		<!-- 搜狐获取IP接口 -->
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

		<script src="../../static/js/public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/public/jquery.session.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/public/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/public/util.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/lib/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="wrap-container welcome-container" id="welcome">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">用户数</p>
										<p><span class="color-org">{{objForIO.userCount}}</span>数据</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe607;</span>
									</div>
									<div class="right-text-con">
										<p class="name">商品数</p>
										<p><span class="color-blue">{{objForIO.productCount}}</span>数据</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe602;</span>
									</div>
									<div class="right-text-con">
										<p class="name">订单数</p>
										<p><span class="color-green">{{objForIO.volume}}</span>数据</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-3 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe60d;</span>
									</div>
									<div class="right-text-con">
										<p class="name">访问量</p>
										<p><span class="color-green">{{objForIO.visits}}</span>数据</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
					<!--服务器信息-->
					<div class="server-panel panel panel-default">
						<div class="panel-header">服务器信息</div>
						<div class="panel-body clearfix">
							<div class="col-md-3">
								<p class="title">服务器环境</p>
								<span class="info">Apache/2.4 PHP/5.4 Tomcat/8.5 Mysql/8.0 JDK/1.8</span>
							</div>
							<div class="col-md-3">
								<p class="title">服务器IP地址</p>
								<span class="info">{{getIp()}}</span>
							</div>
							<div class="col-md-3">
								<p class="title">服务器部署地址</p>
								<span class="info">{{getLocal()}}</span>
							</div>
							<div class="col-md-3">
								<p class="title">服务器当前时间</p>
								<span class="info">{{currentTime}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="welcome-edge col-lg-3">
					<!--最新留言-->
					<div class="panel panel-default comment-panel">
						<div class="panel-header">最新留言</div>
						<div class="panel-body">
							<div class="commentbox">
								<ul class="commentList">
									<li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="../../static/images/pb.png"></i></a>
										<div class="comment-main">
											<header class="comment-header">
												<div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
													<time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
												</div>
											</header>
											<div class="comment-body">
												<p><a href="#">@某人</a> 系统真不错！！！</p>
											</div>
										</div>
									</li>
									<li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="../../static/images/pb.png"></i></a>
										<div class="comment-main">
											<header class="comment-header">
												<div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
													<time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
												</div>
											</header>
											<div class="comment-body">
												<p><a href="#">@某人</a> 系统真不错！！！</p>
											</div>
										</div>
									</li>
									<li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="../../static/images/pb.png"></i></a>
										<div class="comment-main">
											<header class="comment-header">
												<div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
													<time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
												</div>
											</header>
											<div class="comment-body">
												<p><a href="#">@某人</a> 系统真不错！！！</p>
											</div>
										</div>
									</li>
									<li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="../../static/images/pb.png"></i></a>
										<div class="comment-main">
											<header class="comment-header">
												<div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
													<time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
												</div>
											</header>
											<div class="comment-body">
												<p><a href="#">@某人</a> 系统真不错！！！</p>
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div id="pagesbox" style="text-align: center;padding-top: 5px;">

							</div>
						</div>
					</div>
					<!--联系-->
					<div class="panel panel-default contact-panel">
						<div class="panel-header">联系我们</div>
						<div class="panel-body">
							<p>QQ: 382193833</p>
							<p>E-mail: 382193833@qq.com</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var vm1 = new Vue({
				el: '#welcome',
				data: {
					timer: "", // 定义一个定时器的变量
					currentTime: new Date(), // 获取当前时间
					objForIO:{} //获得请求对象
				},
				methods: {
					getIp() { //获得服务器IP
						return returnCitySN["cip"];
					},
					getLocal() { //获得服务器部署地址
						return returnCitySN["cname"];
					},
					loadIO() { // 获得IO信息
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'admin/look-io',
							data: {},
							headers: {
								'Authorization': $.session.get("token")
							}
						}).then(function(res) {
							console.log(res);
					
							if (res.data.status >= 0) {
								_this.objForIO = res.data.object
							} else {
								alert(res.data.msg);
							}
					
						}).catch(function(err) {
							alert(err);
						});
					}
				},
				created() {
					var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
					this.timer = setInterval(function() {
						_this.currentTime = //修改数据date
							new Date().getFullYear() +
							"-" +
							(new Date().getMonth() + 1) +
							"-" +
							new Date().getDate() +
							" " +
							new Date().getHours() +
							":" +
							(new Date().getMinutes()<10?'0'+new Date().getMinutes() : new Date().getMinutes()) +
							":" +
							(new Date().getSeconds()<10?'0'+new Date().getSeconds() : new Date().getSeconds());
					}, 1000);
					
					this.loadIO(); // 初始化IO
				},
				mounted() {

				},
				beforeDestroy() {
					if (this.timer) {
						clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
					}
				}
			})
		</script>

		<script type="text/javascript">
			layui.use(['layer', 'jquery'], function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				//图表
				var myChart;
				require.config({
					paths: {
						echarts: '../../static/lib/echarts'
					}
				});
				require(
					[
						'echarts',
						'echarts/chart/bar',
						'echarts/chart/line',
						'echarts/chart/map'
					],
					function(ec) {
						//--- 折柱 ---
						myChart = ec.init(document.getElementById('chart'));
						myChart.setOption({
							title: {
								text: "数据统计",
								textStyle: {
									color: "rgb(85, 85, 85)",
									fontSize: 18,
									fontStyle: "normal",
									fontWeight: "normal"
								}
							},
							tooltip: {
								trigger: "axis"
							},
							legend: {
								data: ["用户", "商品", "订单", "访问量"],
								selectedMode: false,
							},
							toolbox: {
								show: true,
								feature: {
									dataView: {
										show: false,
										readOnly: true
									},
									magicType: {
										show: false,
										type: ["line", "bar", "stack", "tiled"]
									},
									restore: {
										show: true
									},
									saveAsImage: {
										show: true
									},
									mark: {
										show: false
									}
								}
							},
							calculable: false,
							xAxis: [{
								type: "category",
								boundaryGap: false,
								data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
							}],
							yAxis: [{
								type: "value"
							}],
							grid: {
								x2: 30,
								x: 50
							},
							series: [{
									name: "用户",
									type: "line",
									smooth: true,
									itemStyle: {
										normal: {
											areaStyle: {
												type: "default"
											}
										}
									},
									data: [10, 200, 400, 600, 865, 906, 1000]
								},
								{
									name: "商品",
									type: "line",
									smooth: true,
									itemStyle: {
										normal: {
											areaStyle: {
												type: "default"
											}
										}
									},
									data: [30, 182, 434, 791, 1200, 2000, 2555]
								},
								{
									name: "订单",
									type: "line",
									smooth: true,
									itemStyle: {
										normal: {
											areaStyle: {
												type: "default"
											}
										}
									},
									data: [12, 45, 601, 800, 900, 1500, 3000]
								},
								{
									name: "访问量",
									type: "line",
									smooth: true,
									itemStyle: {
										normal: {
											areaStyle: {
												type: "default"
											}
										}
									},
									data: [899, 435, 377, 421, 344, 421, 799]
								}
							]
						});
					}
				);
				$(window).resize(function() {
					myChart.resize();
				})
			});
		</script>

	</body>

</html>
